<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SubTaskTable from '@/components/Tables/SubTaskTable.vue'
import { mockSubTasks } from '@/utils/mockData'

const router = useRouter()
const route = useRoute()
const subTasks = ref(mockSubTasks())

const goBack = () => {
  router.go(-1)
}
</script>

<template>
  <div class="detail-view">
    <div class="header">
      <button @click="goBack">返回</button>
      <div class="server-info">
        <span>服务器编号: {{ route.params.serverId }}</span>
      </div>
    </div>
    
    <h3>子任务列表</h3>
    <SubTaskTable :data="subTasks" />
  </div>
</template>

<style scoped>
.detail-view {
  padding: 20px;
  background: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.server-info {
  font-size: 14px;
  color: #606266;
}

h3 {
  color: #303133;
  margin: 15px 0;
}
</style>
